<template>
  <el-card class="box-card" shadow="hover">
    <el-table
      :data="users"
      style="width: 100%">
      <el-table-column
        label="用户编号"
        align="center"
        prop="id"
        width="180">
      </el-table-column>
      <el-table-column
        label="用户姓名"
        align="center"
        prop="username"
        width="200">
      </el-table-column>
      <el-table-column
        label="用户密码"
        align="center"
        prop="password"
        width="120">
      </el-table-column>
      <el-table-column
        label="图片"
        align="center"
        width="260">
        <template slot-scope="scope">
          <img :src="scope.row.url" width="100px" height="80px">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="success" style="float:right" plain icon="el-icon-circle-plus" @click="addUser" size="mini">添加</el-button>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      {{myUser}}
      <el-form :model="myUser" >
        <el-form-item label="用户姓名" :label-width="formLabelWidth" >
          <el-input v-model="myUser.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth"  >
         <el-input v-model="myUser.password"  type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户图片" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :http-request="uploadFile"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="user={}">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>


</template>

<script>
  import {findAll,add,uploadFile} from '@/api/myUser'
    export default {
        name: "index",
        data(){
          return {
            users:[],
            title:'添加用户',
            dialogFormVisible:false,
            formLabelWidth:'120px',
            myUser:{},
            fileList:[],


          }
        },
      created() {
          //1. 查询所有用户
          this.findAll();
      },
      methods:{
          //1. 编辑用户
          handleEdit(index, row) {

          },
          //2. 删除用户
          handleDelete(index, row) {

          },
          //3. 查询所有用户
          findAll(){
             findAll().then(({data})=>{
                 console.log("students:",data);
                 this.users = data.list;
             })

          },
          //4. 添加用户
          addUser(){
            //4.1 修改标题
            this.title = "添加用户"
            //4.2 打开对话框
            this.dialogFormVisible = true

          },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        //4. 文件上传
        uploadFile(v){
            let _this = this;
            //4.1 定义formData对象
            let data = new FormData();
            //4.2 向其中添加上传的文件
            data.append("file",v.file);
            //4.3 清空上传的列表
            this.fileList = [];
            //4.4 开始上传
            uploadFile(data,{'headers':{'Content-Type':'multipart/form-data'}}).then((data)=>{
            console.log("data:",data);
            if(data.code == 20000){   // 上传成功后，更新url表上传的文件列表
              //① 将图片路径放到文件列表中，注意，文件格式为：{name:xxx,url:xxx}
              _this.fileList.push({name:v.raw,url:data.data.url});
              //② 设置表单数据中关于当前用户的图片url信息
              _this.myUser.url = data.data.url;
            }
          })
        },
          //5. 提交用户
          submitForm(){
              if(this.myUser.id){   // 代表修改

              }else{              // 代表添加
                add(this.myUser).then((data)=>{
                  let _this = this;
                  if(data.code == 20000){
                    this.$message({
                      message: '添加用户成功！',
                      type: 'success',
                      onClose(){
                        // 刷新页面
                        _this.findAll();
                        // 关闭对话框
                        _this.dialogFormVisible = false;
                      }
                    });
                  }
                })
              }
          },
        }
    }
</script>

<style scoped>

</style>
